<template>
  <div class="home">
    <button @click="msg = 'vue3333'">改变msg</button>
    <button @click="num++">改变num</button>
    <h2>{{ num }}</h2>
  </div>
</template>

<script>
import { watch, watchEffect, ref, reactive, toRefs } from "vue";
export default {
  setup(props) {
    const num = ref(0);
    const data = reactive({
      msg: "helloworld",
    });

    watch(
      () => num.value,
      (newval) => {
        console.log(newval);
      },
      {
        immediate: true,
        deep: true,
      }
    );

    watch(
      num,
      (newval) => {
        console.log(newval);
      },
      {
        immediate: true,
        deep: true,
      }
    );
    //watch 监听 ref定义的数据的时候 第一个参数可以直接 写要监听的值 而且不用加value，也可以写成 第一个参数是一个函数 return 出我们要监听的值 这个时候就要加上value
    // 如果要监听reative定义的数据的时候只能用一个函数 return出我们要监听的值 并且是data.xxx

    watchEffect(() => {
      // console.log(num.value);
      console.log(num.value + data.msg);
    });
    // 不需要指定监听谁 谁跟这个watchEffect有关就会自动监听谁 自带的immediate就是true，进入页面会自动调用一次 然后只要依赖的值发生变化就会触发这个监听器 只要在这个函数中出现的值就是依赖的值

    return { ...toRefs(data), num };
  },
};
</script>
